<div id="copyright">
    <div class="container">
        Copyright &copy;  {$index.copyright|html_entity_decode=###}
    </div>
    <span><a href="/index" target="_blank">控制台</a></span>
</div>

<style>
    .returnTop{
        width:60px;
        height:60px;
        border: 1px solid #006699;
        border-radius:4px;
        background: #fff;
        box-shadow: 0 0 5px #F5F5F5;
        line-height:55px;
        text-align:center;
        position:fixed;
        right:100px;
        bottom:180px;
        cursor:pointer;
    }
    .returnCommit{
        width:60px;
        height:60px;
        border: 1px solid #006699;
        border-radius:4px;
        background: #fff;
        box-shadow: 0 0 5px #F5F5F5;
        line-height:55px;
        text-align:center;
        position:fixed;
        right:100px;
        bottom:115px;
        cursor:pointer;
    }
    .returnDown{
        width:60px;
        height:60px;
        border: 1px solid #006699;
        border-radius:4px;
        background: #fff;
        box-shadow: 0 0 5px #F5F5F5;
        line-height:55px;
        text-align:center;
        position:fixed;
        right:100px;
        bottom:50px;
        cursor:pointer;
    }
</style>

<div class="returnTop" title="返回顶部">
    <img src="/static/yui/images/up.png" width="40px" height="40px">
</div>

<div class="returnCommit" title="留言">
    <img src="/static/yui/images/chat.png" width="40px" height="40px">
</div>

<div class="returnDown" title="返回底部">
    <img src="/static/yui/images/down.png" width="40px" height="40px">
</div>

<style>
    .smart-green {
        margin-left:auto;
        margin-right:auto;
        max-width: 500px;
        background: #F8F8F8;
        padding: 30px 30px 20px 30px;
        font: 12px Arial, Helvetica, sans-serif;
        color: #666;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
    }
    .smart-green h1 {
        font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
        padding: 20px 0px 20px 40px;
        display: block;
        margin: -30px -30px 10px -30px;
        color: #FFF;
        background: #006699;
        text-shadow: 1px 1px 1px #949494;
        border-radius: 5px 5px 0px 0px;
        -webkit-border-radius: 5px 5px 0px 0px;
        -moz-border-radius: 5px 5px 0px 0px;
        border-bottom:1px solid #89AF4C;

    }
    .smart-green h1>span {
        display: block;
        font-size: 11px;
        color: #FFF;
    }

    .smart-green label {
        display: block;
        margin: 0px 0px 5px;
    }
    .smart-green label>span {
        float: left;
        margin-top: 10px;
        color: #5E5E5E;
    }
    .smart-green input[type="text"], .smart-green input[type="email"], .smart-green textarea, .smart-green select {
        color: #555;
        height: 30px;
        line-height:15px;
        width: 100%;
        padding: 0px 0px 0px 10px;
        margin-top: 2px;
        border: 1px solid #E5E5E5;
        background: #FBFBFB;
        outline: 0;
        -webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
        box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
        font: normal 14px/14px Arial, Helvetica, sans-serif;
    }
    .smart-green textarea{
        height:100px;
        padding-top: 10px;
    }
    .smart-green .button {
        background-color: #006699;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-border-radius: 5px;
        border: none;
        padding: 10px 25px 10px 25px;
        color: #FFF;
        text-shadow: 1px 1px 1px #949494;
    }
    .smart-green .button:hover {
        background-color:#80A24A;
    }
</style>
<div  class="smart-green" style="display: none">
    <h1>联系我们
        <span>请填写下列表单Ava</span>
    </h1>
    <label>
        <span>昵称 :</span>
        <input id="nickname" type="text" name="nickname" placeholder="昵称" />
    </label>

    <label>
        <span>邮箱 :</span>
        <input id="contact" type="email" name="contact" placeholder="邮箱" />
    </label>

    <label>
        <span>留言内容 :</span>
        <textarea id="content" name="content" placeholder="留言内容"></textarea>
    </label>

    <label>
        <span>&nbsp;</span>
        <input type="button" onclick="subMsg()" class="button" value="提交" />
    </label>
</div>

<script>
    
    function subMsg() {
        layer.confirm('确认提交', function(index){
            let nickname=$("input[name='nickname']").val();
            let contact=$("input[name='contact']").val();
            let content=$("textarea[name='content']").val();
            $.post("/guestMsg",
                {
                    nickname:nickname,
                    contact:contact,
                    content:content
                },
                function(data,status){
                    layer.msg(data['msg']);
                    layer.close(msgLayer);
                }, "json"
            );
            layer.close(index);
        });
    }
    
    $(window).bind("scroll", function(){
        // 获取网页文档对象滚动条的垂直偏移
        let scrollTopNum = $(document).scrollTop(),
            // 获取浏览器当前窗口的高度
            winHeight = $(window).height(),
            returnTop = $("div.returnTop"),
            returnCommit = $("div.returnCommit"),
            returnDown = $("div.returnDown");
        // 滚动条的垂直偏移大于 0 时显示，反之隐藏
        if(scrollTopNum > 0) {
            returnTop.fadeIn("fast");
            returnCommit.fadeIn("fast");
            returnDown.fadeIn("fast");
        }else {
            returnTop.fadeOut("fast");
            returnCommit.fadeOut("fast");
            returnDown.fadeOut("fast");
        }
        // 给 IE6 定位
        if (!-[1,]&&!window.XMLHttpRequest) {
            returnTop.css("top", scrollTopNum + winHeight - 200);
        }

    });

    // 点击按钮后，滚动条的垂直方向的值逐渐变为0，也就是滑动向上的效果
    $("div.returnTop").click(function() {
        $("html, body").animate({ scrollTop: 0 }, 100);
    });

    $("div.returnDown").click(function() {
        $("html,body").animate({
            scrollTop: document.body.clientHeight
        },100);
    });

    $("div.returnTop").click();

    let msgLayer ;
    $(function () {
        $('.pagination li a').each(function(){
            let href = $(this).attr("href") + "#p2";
            $(this).attr("href",href);
        });

        $("div.returnCommit").on('click' , function(){
            $('.smart-green').show();
            msgLayer = layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                area: ['500px','auto'],
                skin: 'layui-layer-nobg', //没有背景色
                shadeClose: true,
                content: $('.smart-green'),
                end : function(){
                    $('.smart-green').hide();
                }
            });
        });
    });

</script>